<template>
	<view class="" style="color: #fff;">
		<image class="bgImage" src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/guideBg.png"></image>
		<view class="lottie" style="margin-top: 260rpx;">
			<!-- #ifdef MP -->
			<canvas id="lottie_demo" type="2d" style=" width:300rpx; height: 300rpx;margin: 0 auto;" />
			<!-- #endif -->
			<!-- #ifdef APP -->
			<x-lottie style="height: 300rpx;width: 350rpx;margin: 0 auto;" :option="{
				                path:require('../../../static/json/loading.json')
				}" />
			<!-- #endif -->
			
		</view>
		<view class="linePro">
			<p>{{percentNum}}%</p>
			<u-line-progress :percentage="percentNum" height="24rpx" inactiveColor="#292C3B" :showText="false"
				activeColor="#47E969"></u-line-progress>
		</view>
		<view class="titleText">
			<p>正在开启你的专属智能AI法律助理</p>
			<p>请稍等...</p>
		</view>
		<view class="itembox">
			<view class="item1">
				<image v-if="waitList.includes(1)" src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon17.png"
					mode="widthFix"></image>
				<image v-else src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon16.png" mode="widthFix"></image>
				<text>你的专属私人AI法律顾问</text>
			</view>
			<view class="item1">
				<image v-if="waitList.includes(2)" src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon17.png"
					mode="widthFix"></image>
				<image v-else src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon16.png" mode="widthFix"></image>
				<text>基于深度学习的智能对话模型</text>
			</view>
			<view class="item1">
				<image v-if="waitList.includes(3)" src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon17.png"
					mode="widthFix"></image>
				<image v-else src="http://cdn.yic3.cn/lawyer/mp-xhs/guide/icon16.png" mode="widthFix"></image>
				<text>全球领先的人工智能AI法律助手</text>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef MP
	import lottie from 'lottie-miniprogram'
	// #endif
	let ani = null;
	export default {
		data() {
			return {
				payRadio: 1,
				percentNum: 0,
				waitList: []
			}
		},
		onReady() {
			// #ifdef MP-WEIXIN
			this.init()
			wx.reportEvent("guide_loading", {})
			// #endif
			// #ifdef APP
			plus.statistic.eventTrig('guide_loading')
			this.$api.userEvent({
				type: 'click',
				key: 'guide.generate.click',
				value: "guide.generate",
				extra: '数据生成页面'
			}).then(res => {})
			// #endif
			let timer = setInterval(() => {
				this.percentNum++
				if (this.percentNum == 100) {
					clearInterval(timer)
					let timerOut =  setTimeout(() => {
						uni.vibrateLong({
							success: function() {
								console.log('success');
							},
							fail(err) {
								console.log(err)
							}
						});
						uni.setStorageSync('guideIsOver', true)
						if (uni.getStorageSync('config')['client.guide.pay.enable']) {
							uni.reLaunch({
								url: '/guide/pages/guide_6/guide_6'
							})
						} else {
							uni.reLaunch({
								url: '/pages/index/home/home'
							})
						}
						clearTimeout(timerOut)
					}, 500)
				}
				if (this.percentNum == 25) {
					this.waitList.push(1)
				}
				if (this.percentNum == 50) {
					this.waitList.push(2)
				}
				if (this.percentNum == 75) {
					this.waitList.push(3)
				}
			}, 40)
		},
		methods: {
			init() {
				try {
					uni.createSelectorQuery()
						.select('#lottie_demo')
						.node(res => {
							console.log(res); // 节点对应的 Canvas 实例。
							const canvas = res.node;
							const context = canvas.getContext('2d');
							canvas.width = 300;
							canvas.height = 300;
							lottie.setup(canvas);
							ani = lottie.loadAnimation({
								loop: true,
								autoplay: true,
								animationData: require('../../../static/json/loading.json'),
								rendererSettings: {
									context
								}
							});
						})
						.exec();
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

			},

		},
	}
</script>

<style lang="scss" scoped>
	@import 'guide_5.scss';
</style>